import ReactDOM from 'react-dom'


// jsx的嵌入表达式  使用 {}  进行嵌入

// 数据
const data = {
  name: 'tom',
  age: 20
}

// 函数
const up = () => {
  return data.name.toUpperCase()
}

// jsx本身就是表达式
const list = (
  <ul>
    <li>jack</li>
    <li>rose</li>
  </ul>
)

const element = (
  <div>
    {/* 数据 */}
    <p>姓名：{data.name}</p>
    <p>年龄：{data.age}</p>
    {/* 运算 */}
    <p>明年年龄：{data.age + 1}</p>
    {/* 三元 */}
    <p>是否成年：{data.age > 16 ? '是' : '否'}</p>
    {/* 函数 */}
    <p>姓名大写：{up()}</p>
    {/* 嵌入jsx */}
    <p>朋友：{list}</p>
  </div>
)


ReactDOM.render(element, document.getElementById('root'))